<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/scheduling' }">排班管理</el-breadcrumb-item>
        </el-breadcrumb>
        
        <!-- 搜索与添加信息 -->
        <el-card>
            <el-row>
                <el-header>
                    <el-col :offset="10" :span="11">
                        <h2>排班计划表</h2>
                    </el-col>
                    <el-col :span="3">
                        <span style="font-size:12px">当前日期：{{currentDate}}<br/>注意：历史排班无法修改</span>
                    </el-col>
                </el-header>
                
                <el-header>
                  <el-col :span="8"><span>起始日期:</span>
                    <el-date-picker
                      size="small"
                      v-model="schedInfo.startDate"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="选择日期">
                    </el-date-picker>
                  </el-col>
                  <el-col :span="8"><span>科室类别:</span>
                    <el-select v-model="schedInfo.deptCategoryId" size="small" filterable clearable placeholder="请选择科室类别" @change="getDept">
                        <el-option
                          v-for="item in deptTypeArray"
                          :key="item.deptCategoryId"
                          :label="item.constantItem.constantName"
                          :value="item.deptCategoryId">
                        </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="8"><span>挂号级别:</span>
                    <el-select v-model="schedInfo.registLeId" size="small" filterable clearable placeholder="请选择挂号级别">
                        <el-option
                          v-for="item in registLevelArray"
                          :key="item.id"
                          :label="item.registName"
                          :value="item.id">
                        </el-option>
                    </el-select>
                  </el-col>
                </el-header>

                <el-header>
                  <el-col :span="8"><span>结束日期:</span>
                    <el-date-picker
                      size="small"
                      v-model="schedInfo.endDate"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="选择日期">
                    </el-date-picker>
                  </el-col>
                  <el-col :span="8"> <span>科室名称:</span>
                    <el-select v-model="schedInfo.deptId" size="small" filterable clearable placeholder="请选择科室">
                        <el-option
                          v-for="item in deptArray"
                          :key="item.id"
                          :label="item.deptName"
                          :value="item.id">
                        </el-option>
                    </el-select>
                  </el-col>
                  
                  <el-col :span="8">
                    <el-button type="primary" @click="getScheduling">查 询</el-button>
                    <el-button type="primary" @click="toAddScheduling">生成排班</el-button>
                    <el-button type="primary" @click="toRule">管理规则</el-button>
                  </el-col>
                </el-header>
            </el-row>

            <!-- 表格 -->
              <table v-if="schedulingArray.length==0"  align="center">
                <div  class="noData">无数据</div>
              </table>
              <div style="overflow-x: auto; overflow-y: auto; width:100%;" v-else>
                <table align="center" class="tableType">
                <tr>
                  <td width="40px">姓 名</td>
                  <td v-for="(it,id) in schedulingArray[0]" :key="id">{{it.schedDate}} {{it.noon}}</td>
                  <td colspan="2">操 作</td>
                </tr>
                <tr v-for="(items,Index) in schedulingArray" :key="Index">
                  <td>{{items[0].realName}}</td>
                  <td v-for="(item,index) in items" :key="index" >
                    <el-checkbox v-model="item.onDuty" v-if="Index==editSwitch&&item.schedDate>=currentDate"></el-checkbox>
                    <el-checkbox :value="item.onDuty" v-else></el-checkbox>
                  </td>
                  <td colspan="2" v-if="Index!=editSwitch">
                    <el-button type="primary" @click="openEdit(items,Index)">修 改</el-button>
                  </td>
                  <td v-if="Index==editSwitch">
                    <el-button type="success" @click="updateScheduling(items)">确 定</el-button>
                  </td>
                  <td v-if="Index==editSwitch">
                    <el-button type="success" @click="offEdit()">取 消</el-button>
                  </td>
                </tr>
              </table>
              </div>
        </el-card>

        <el-col :span="4">
          <el-dialog title="生成排班计划" width="880px" :visible.sync="addSwitch">
                <el-header>
                  <el-col :span="8" :offset="3"><span>科室类别:</span>
                    <el-select v-model="schedInfo.deptCategoryId" size="small" filterable clearable placeholder="请选择科室类别" @change="getDept">
                        <el-option
                          v-for="item in deptTypeArray"
                          :key="item.deptCategoryId"
                          :label="item.constantItem.constantName"
                          :value="item.deptCategoryId">
                        </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="8" :offset="2"><span>挂号级别:</span>
                    <el-select v-model="schedInfo.registLeId" size="small" filterable clearable placeholder="请选择挂号级别">
                        <el-option
                          v-for="item in registLevelArray"
                          :key="item.id"
                          :label="item.registName"
                          :value="item.id">
                        </el-option>
                    </el-select>
                  </el-col>
                </el-header>

                <el-header>
                  <el-col :span="8" :offset="3"> <span>科室名称:</span>
                    <el-select v-model="schedInfo.deptId" size="small" filterable clearable placeholder="请选择科室">
                        <el-option
                          v-for="item in deptArray"
                          :key="item.id"
                          :label="item.deptName"
                          :value="item.id">
                        </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="8" :offset="5">
                    <el-button type="primary" @click="getRule">查 询</el-button>
                  </el-col>
                </el-header>

              <template>
              <el-table
                ref="multipleTable"
                :data="ruleArray"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column
                  type="selection"
                  width="80">
                </el-table-column>
                <el-table-column
                  prop="ruleName"
                  label="规则名称"
                  width="170">
                </el-table-column>
                <el-table-column
                  prop="user.realName"
                  label="医生姓名"
                  width="170">
                </el-table-column>
                <el-table-column
                  prop="department.deptName"
                  label="所属科室"
                  width="170">
                </el-table-column>
                <el-table-column
                  prop="week"
                  label="排班规则"
                  show-overflow-tooltip>
                </el-table-column>
              </el-table>
               <!-- 分页组件 -->
              <el-pagination
                @size-change="ruleSizeChange"
                @current-change="ruleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
              </el-pagination>  
            </template>
              <div slot="footer" class="dialog-footer">
                  <el-footer>
                    <el-col :span="9"><span>起始日期:</span>
                    <el-date-picker
                      size="small"
                      v-model="schedInfo.startDate"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="选择日期">
                    </el-date-picker>
                  </el-col>
                  <el-col :span="9"><span>结束日期:</span>
                    <el-date-picker
                      size="small"
                      v-model="schedInfo.endDate"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="选择日期">
                    </el-date-picker>
                  </el-col>
                  <el-col :span="6">
                    <el-button type="primary" @click="addScheduling">生 成</el-button>
                    <el-button @click="addSwitch = false">取 消</el-button>
                  </el-col>
                  </el-footer>
              </div>
          </el-dialog>
        </el-col>
  
    </div>
</template>

<script>
    export default {
      data() {
        return {
          user:{},
          //当前日期
          currentDate:'',
          //选择排班规则
          multipleSelection:[],
          //修改开关
          editSwitch:-1,
          //下拉列表数据
          deptTypeArray:[],
          deptArray:[],
          registLevelArray:[],
          //查询排班信息的参数
          schedInfo:{
            //日期选择
            startDate:null,
            endDate:null,
            //筛选条件
            deptCategoryId:'',
            deptId:'',
            registLeId:'',
          },
          //排班规则的分页数据
          pageNum:1,
          pageSize:5,
          total:0,
          //保存请求服务端数据
          schedulingArray:[],
          ruleArray:[],
          //添加排班计划窗口的开关
          addSwitch: false,
        }
      },
      created(){
        this.user = this.$getSessionStorage("user")
        this.currentDate = this.$getCurDate();
        this.getDeptCategory();
        this.getRegistLevel();
        this.getScheduling();
      },
      methods:{
        //设置权限
        checkUser(){
          if(this.user.useType ==1){
            return true;
          }else{
            this.$message.error("无权限")
            return false;
          }
        },
        //选择排班规则
        handleSelectionChange(val) {
          this.multipleSelection = val;
        },
        //监听排班规则分页
        ruleSizeChange(newSize){
          this.pageSize=newSize
          this.getRule();
        },
        ruleCurrentChange(newPage) {
          this.pageNum=newPage
          this.getRule();
        },
        //科室分类
        getDeptCategory(){
          this.$axios.get('department/getDeptCategory'
          ).then(response=>{
            console.log(response.data);
            this.deptTypeArray=response.data;
          }).catch(error=>{
            console.log(error);
          })
        },
        //科室
        getDept(){
          this.$axios.post('department/deptListByType',this.$qs.stringify({
					deptCategoryId:this.schedInfo.deptCategoryId,
				})).then(response=>{
            console.log(response.data);
            this.deptArray=response.data;
          }).catch(error=>{
            console.log(error);
          })
        },
        //挂号级别
        getRegistLevel(){
          this.$axios.get('registLevel/getRegistLevel'
				  ).then(response=>{
            console.log(response.data);
            this.registLevelArray=response.data;
          }).catch(error=>{
            console.log(error);
          })
        },
        //获取排班计划
        getScheduling(){
          this.$axios.post('scheduling/getScheduling',this.$qs.stringify(
            this.schedInfo
          )).then(response=>{
            console.log(response.data);
            this.schedulingArray=response.data;
          }).catch(error=>{
            console.log(error);
          })
        },
        //修改的开关
        openEdit(items,Index){
          if(this.checkUser()&&this.editSwitch==-1){
            this.editSwitch = Index;
          }
        },
        offEdit(){
          this.getScheduling();
          this.editSwitch = -1;
        },
        //更新排班
        updateScheduling(items){
          if(this.checkUser()){
            this.$axios.post('scheduling/updateScheduling',{schedulingList:items}
            ).then(response=>{
              console.log(response.data);
              if(response.data == true){
                this.$message.success("修改成功")
              } else{
                this.$message.error("修改失败")
              }
            }).catch(error=>{
              console.log(error);
            })
            this.editSwitch = -1;
          }
        },
        //打开生成排班的窗口
        toAddScheduling(){
          if(this.checkUser()){
            this.getRule();
            this.addSwitch = true;
          }
        },
        //获取排班规则
        getRule(){
          if(this.checkUser()){
            this.$axios.post('rule/getRule',this.$qs.stringify({
              deptCategoryId:this.schedInfo.deptCategoryId,
              deptId:this.schedInfo.deptId,
              registLeId:this.schedInfo.registLeId,
              pageNum:this.pageNum,
              pageSize:this.pageSize
            })).then(response=>{
              console.log(response.data);
              this.total=response.data.total
              this.ruleArray=response.data.list;
            }).catch(error=>{
              console.log(error);
            })
          }
        },
        //前往规则管理页面
        toRule(){
          if(this.checkUser()){
            this.$router.push('/rule')
          }
        },
        //检测选定的规则是否重复
        checkMultipleSelection(list){
          for(let i=0;i<list.length-1;i++){
            if(list[i].user.realName == list[i+1].user.realName){
              this.$message.error("规则有重复！")
              return false;
            }
          }
          return true;
        },
        //在添加排班之前先检查数据
        beforeAddScheduling(){
          if(this.checkUser()){
            if(this.schedInfo.startDate==null||this.schedInfo.endDate==null){
              this.$message.error("请选择起止日期")
              return false;
            }
            if(this.schedInfo.startDate<this.currentDate){
                this.$message.error("起始日期至少是今天")
                return false;
            }
            if(this.schedInfo.startDate>=this.schedInfo.endDate){
                this.$message.error("终止日期不能小于起始日期")
                return false; 
            }
            if(this.multipleSelection.length ==0){
                this.$message.error("请选择排班规则")
                return false;
            }
          }
          return this.checkMultipleSelection(this.multipleSelection);
        },
        //生成排班
        addScheduling(){
          if(this.beforeAddScheduling()){
            this.$axios.post('scheduling/addScheduling',{
                ruleList:this.multipleSelection,
                startDate:this.schedInfo.startDate,
                endDate:this.schedInfo.endDate
            }).then(response=>{
              console.log(response.data);
              if(response.data == true){
                this.addSwitch = false;
                this.$message.success("添加成功")
                this.getScheduling();
              } else{
                this.$message.error("添加失败")
              }
            }).catch(error=>{
              console.log(error);
            })
          }
        }
      }
    }
</script>

<style scoped>
  .el-card {
    margin-top: 15px;
  }
  .tableType{
    background-color: rgb(219, 219, 219);
  }
  td {
    text-align: center;
    background-color: rgb(254, 254, 254);
  }
  .noData{
    font-size: 36px;
    color: rgb(189, 189, 189);
  }
  
</style>